<template>
<div class="view-box">
  <!--背景盒子-->
  <div class="bg-fox">
    <div style="width: 100%; height: 100%">
      <!-- 三角形-->
      <div class="sjx" style="position: absolute; top: 0vh; left: 25vw; transform: rotate(70deg) scale(0.8, 0.8);" />
      <div class="sjx" style="position: absolute; top: 0vh; right: 15vw; transform: rotate(60deg) scale(0.5, 0.5);" />
      <div class="sjx" style="position: absolute; top: 25vh; right: -2vw; transform: rotate(40deg);" />
      <div class="sjx" style="position: absolute; bottom: 10vh; right: 20vw; transform: rotate(10deg) scale(1.5, 1.5);" />
    </div>
  </div>
  <!--内容盒子-->
  <div class="for-box">
    <div class="login-box">
      <div class="login-box-2">
        <!-- 表单盒子 -->
        <div class="from-box from-box-show">
          <h3 class="from-title">
            <img src="@/assets/bg/logo.png" class="logo">
            <span>{{ titleText }}</span>
          </h3>
          <el-form ref="ruleForm" size="medium" :model="m" label-position="left" label-width="80px" :rules="rules">
            <el-form-item label="用户账户" prop='name'>
              <el-input v-model="m.name" placeholder="请输入用户账户"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop='nickName'>
              <el-input v-model="m.nickName" placeholder="请输入用户昵称"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model="m.phone" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" prop="email">
              <el-input v-model="m.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="出生日期">
              <el-date-picker type="datetime"  value-format="yyyy-MM-dd  HH:mm:ss" v-model="m.birth" placeholder="请选择出生日期" clearable></el-date-picker>
            </el-form-item>
            <el-form-item label="用户性别">
              <el-radio-group v-model="m.sex">
                <el-radio-button :label="k" v-for="(v, k) in dims.GENDER" :key="k">{{ v }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="用户密码" prop='pwd'>
              <el-input v-model="m.pwd" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop='surePwd'>
              <el-input v-model="m.surePwd" placeholder="请确认密码" show-password></el-input>
            </el-form-item>
            <el-form-item label="个人简介" prop="note">
              <el-input v-model="m.note" type="textarea" placeholder="请输入个人简介"></el-input>
            </el-form-item>
            <el-form-item class="s-ok">
              <el-button type="primary" @click="ok('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-link :underline="false" :href="goLogin()" ><span class="go-login">登录<svg-icon icon-class="arrow_right_line"></svg-icon></span></el-link>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import sa from '@/sa-frame/sa';
import getPageTitle from '@/utils/get-page-title';
import settings from '@/settings'
export default {
  name: 'sbs-regist',
  data() {
    // 手机号码正则表达式
    const phoneNumberRegex = /^1[3-9]\d{9}$/;
    return {
      // 超级对象
      m: this.createModel(),
      dims: sa.$sys.getCurd(),
      // 标题
      titleText: getPageTitle() + " · 注册",
      rules: {
        phone: [{
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          },
          {
            pattern: phoneNumberRegex,
            message: '请输入有效的手机号码',
            trigger: 'blur'
          }
        ],
        name: [{
          required: true,
          message: '请输入用户账户',
          trigger: 'blur'
        }],
        nickName: [{
          required: true,
          message: '请输入用户昵称',
          trigger: 'blur'
        }],
        pwd: [{
          required: true,
          message: '请输入用户密码',
          trigger: 'blur'
        }],
        surePwd: [{
          required: true,
          message: '请输入确认密码',
          trigger: 'blur'
        }],
      },
    }
  },
  methods: {
    createModel() {
      return {
        name: '',
        nickName: '',
        phone: '',
        pwd: '',
        surePwd: '',
        note: '',
        sex: '',
        birth: ''
      }
    },
    // 变更
    ok(formName) {
      // 表单校验
      let m = this.m;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          sa.check(m.pwd.length < 6, '密码至少6位！');
          sa.check(m.surePwd !== m.pwd, '前后密码不一致！');
          // 添加
          sa.ajax('/user/register', m, function (res) {
            if (res.code === 200) {
              this.m = this.createModel();
              sa.msg(res.msg);
              // 清空
              this.$refs[formName].resetFields();
            }
          }.bind(this));
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 去登录
    goLogin(){
      return settings.login_url;
    }
  }
}
</script>

<style scoped>
.bg-fox {
  width: 100%;
  height: 100%;
  background-color: rgb(250, 254, 255);
  z-index: -1;
}

.for-box {
  width: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
}

.login-box {
  flex: 1;
}

.login-box-2 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  align-items: center;
  max-width: 90vw;
  margin: auto;
  height: 100vh;

}

/* 表单 */
.from-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
  width: 50vw;
  border-radius: 1px;
}

.el-date-editor{
  width: 100% !important;
}

.from-title {
  font-size: 24px;
  color: #555555;
  margin: 0px 0px 20px 0px;
  text-align: center;
  position: relative;
  left: -15px;
  width: 100%;
}

.el-form {
  width: 100%;
  opacity: 1;
  z-index: 10;
}

.el-radio-group {
  display: flex;
}

.logo {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 15px;
  border-radius: 50%;
  background-color: #f7f6f6;
}

/*动画*/
.bg-fox>div {
  animation: changes 30s 0.2s linear infinite alternate;
}

/* normal | alternate */
@keyframes changes {
  from {
    transform: translate(0, 0vh);
  }

  to {
    transform: translate(0, 15vh);
  }
}

.sjx {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 180px solid #dee7f8;
}

/* 2px圆角 */
.view-box>>>.el-input__inner,
.view-box>>>.el-button {
  border-radius: 2px !important;
}

/* 渐渐显示的动画 */
.from-box {
  opacity: 0;
  transition: opacity 1s;
}

.from-box-show {
  opacity: 1;
}

.s-ok {
  display: flex;
  justify-content: center;
}
.go-login{
  color: #b9b9b9;
}
</style>
